﻿@{
    ViewBag.Title = "Dashboard";
}

<style type="text/css">
    .dashbord .chart
    {
        min-width: 500px;
        max-width: 1080px;
        width: 90%;
        height: 450px;
        border: 1px solid #ccc;
        margin: 20px 10px;
        float: left;
    }

    .dashbord .chart-w
    {
        width: 1080px;
        height: 360px;
        border: 1px solid #ccc;
        margin: 20px 10px;
        float: left;
    }

    #divhead div
    {
        margin-bottom: 15px;
    }

        #divhead div select
        {
            border-color: #e2e2e2;
        }

    .ml20
    {
        margin-left: 20px;
    }
</style>

<div id="tab-container" class="tab-container dashbord">
    <div id="divhead">
        <div>
            <span>StartDate :
        <input id="startDate" type="text" readonly="true" value="2013-12-01" />
            </span>
            <span class="ml20">EndDate :
        <input id="endDate" type="text" readonly="true" value="2014-04-30" />
            </span>
            <span class="ml20">
                <button class="btn btn-primary btn-sm" type="submit" id="btnSearch">
                    <span class="glyphicon glyphicon-search"></span>Search
                </button>
            </span>
        </div>
        <div>
            <span>Interval : @Html.DropDownList("Interval", ViewData["Interval"] as List<SelectListItem>, new { style = "width:100px;height:30px;" })</span>
            <span class="ml20">Type :  @Html.DropDownList("Level1", ViewData["Level1"] as List<SelectListItem>, new { style = "width:150px;height:30px;" })</span>
        </div>
    </div>
    <div>
        <div id="chartMain" class="chart"></div>
    </div>
    <div>
        <div id="chartSub" class="chart"></div>
    </div>
    <div>
        <div id="chartSubDetail" class="chart"></div>
    </div>
</div>
<div id="wrong-message"></div>


@section Scripts {
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/Scripts/ECharts/esl.js")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/Scripts/base.js")

    <script type="text/javascript">
        $(document).ready(function () {
            ShowCategoryTimeChart();

            $("#startDate").datepicker({
                dateFormat: "yy-mm-dd",
            });
            $("#endDate").datepicker(
                {
                    dateFormat: "yy-mm-dd"
                });

        });

        $("#btnSearch").click(function () {
            ShowCategoryTimeChart();
        });

        require.config({
            packages: [
                {
                    name: 'echarts',
                    location: '@Url.Content("~/Scripts/ECharts")',
                    main: 'echarts'
                },
                {
                    name: 'zrender',
                    location: '@Url.Content("~/Scripts/ECharts/zrender")',
                    main: 'zrender'
                }
            ]
        });

            var option_CategoryMonthlyChart = {
                title: {
                    //text: $("#Level1").val(),
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    padding: [30, 5, 20, 5],
                    data: []
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    x: 'right',
                    y: 'center',
                    feature: {
                        mark: true,
                        dataView: { readOnly: false },
                        magicType: ['line', 'bar'],
                        restore: true,
                        saveAsImage: true
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitArea: { show: true }
                    }
                ],
                series: [
                ]
            };

            function ShowCategoryTimeChart() {
                require(
                    [
                        'echarts',
                        'echarts/chart/line',
                        'echarts/chart/bar'
                    ],
                    function (ec) {
                        var chartDom = document.getElementById('chartMain');
                        var chartMain = ec.init(chartDom)
                        chartMain.clear();

                        option_CategoryMonthlyChart.title.text = $("#Level1").val();
                        $.ajax(
                            {
                                url: '@Url.Action("GetGroupByData", "Report")',
                                data: 'chartType=ChartBar&type=' + $("#Level1").val() + '&startDate=' + $("#startDate").val() + '&endDate=' + $("#endDate").val() + '&interval=' + $("#Interval").val(),
                                beforeSend: function () {
                                    $("#chartMain").addClass("loading");
                                },
                                success: function (result) {
                                    $("#chartMain").removeClass("loading");
                                    option_CategoryMonthlyChart.xAxis[0].data = [];
                                    option_CategoryMonthlyChart.series = [];
                                    option_CategoryMonthlyChart = BuildOptionForBarChart(eval(result), option_CategoryMonthlyChart);
                                    chartMain.clear();
                                    chartMain.setOption(option_CategoryMonthlyChart);
                                    var ecConfig = require('echarts/config');
                                    chartMain.un(ecConfig.EVENT.CLICK);
                                    chartMain.on(ecConfig.EVENT.CLICK, function (param) {
                                        option_SubCategoryChart.startDate = param.name;
                                        ShowSubCategoryChart($("#Level1").val(), option_CategoryMonthlyChart.series[param.seriesIndex].name, 'All', param.name, '', $("#Interval").val());
                                        //ShowSubCategoryErrorChart('All', 'Group|' + option_CategoryMonthlyChart.series[param.seriesIndex].name, param.name, '', $("#Interval").val())
                                    });
                                }
                            }

                            )
                    }
            );
                };

                //SubCategory begin
                var option_SubCategoryChart = {
                    title: {
                        text: 'Applications',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: []
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: true,
                            dataView: { readOnly: false },
                            restore: true,
                            saveAsImage: true
                        }
                    },
                    calculable: false,
                    series: [],
                    startDate: Date
                };

                var showSubCategoryEventBinded2 = false;
                function ShowSubCategoryChart(level1, category, subCategory, startDate, endDate, interval) {
                    $.ajax(
                        {
                            url: '@Url.Action("GetSubCategoryData", "Report")',
                            data: 'chartType=ChartPie&type=' + level1 + '&category=' + category + '&subCategory=' + subCategory + '&startDate=' + startDate + '&interval=' + interval,
                            beforeSend: function () {

                                $("#chartSub").addClass("loading");
                            },
                            success: function (result) {
                                $("#chartSub").removeClass("loading");
                                option_SubCategoryChart = BuildOptionForPieChart(eval(result), option_SubCategoryChart);
                                require(
                                       [
                                           'echarts',
                                           'echarts/chart/line',
                                           'echarts/chart/bar',
                                           'echarts/chart/pie'
                                       ],
                                       function (ec) {
                                           var mySubCategoryChart = ec.init(document.getElementById('chartSub'));
                                           mySubCategoryChart.clear();
                                           option_SubCategoryChart.title.text = category;
                                           mySubCategoryChart.setOption(option_SubCategoryChart);

                                           if (!showSubCategoryEventBinded2) {
                                               var ecConfig = require('echarts/config');
                                               mySubCategoryChart.un(ecConfig.EVENT.CLICK);
                                               mySubCategoryChart.on(ecConfig.EVENT.CLICK, function (param) {
                                                   ShowSubCategoryErrorChart('Error', option_SubCategoryChart.title.text, option_SubCategoryChart.series[param.seriesIndex].data[param.dataIndex].name, $("#startDate").val(), '', $("#Interval").val());
                                               }
                               );
                                               showSubCategoryEventBinded2 = true;
                                           }
                                       }
                                   )
                            }
                        });
                }
                //SubCategory end

                //SubCategoryError begin
                var option_SubCategoryErrorChart = {
                    title: {
                        text: 'Detail',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: []
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: true,
                            dataView: { readOnly: false },
                            restore: true,
                            saveAsImage: true
                        }
                    },
                    calculable: false,
                    series: []
                };

                function ShowSubCategoryErrorChart(level1, category, subCategory, startDate, endDate, interval) {
                    $.ajax(
                        {
                            url: '@Url.Action("GetSubCategoryData", "Report")',
                            data: 'chartType=ChartPie&type=' + level1 + '&category=' + category + '&subCategory=' + subCategory + '&startDate=' + startDate + '&interval=' + interval,
                            beforeSend: function () {
                                $("#chartSubDetail").addClass("loading");
                            },
                            success: function (result) {
                                $("#chartSubDetail").removeClass("loading");
                                option_SubCategoryErrorChart = BuildOptionForPieChart(eval(result), option_SubCategoryErrorChart);
                                require(
                                       [
                                           'echarts',
                                           'echarts/chart/line',
                                           'echarts/chart/bar',
                                           'echarts/chart/pie'
                                       ],
                                       function (ec) {
                                           var chartSubDetail = ec.init(document.getElementById('chartSubDetail'));
                                           chartSubDetail.clear();
                                           var tmpTitle = subCategory;
                                           if (subCategory.split('|').length > 1) {
                                               tmpTitle = subCategory.split('|')[1];
                                           }
                                           option_SubCategoryErrorChart.title.text = "Log Detail - " + tmpTitle;
                                           chartSubDetail.setOption(option_SubCategoryErrorChart);
                                       }
                                   )
                            }
                        });
                }
                //SubCategoryError end 
    </script>
}
